﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CategorySelector.ascx.cs"
    Inherits="Components_CategorySelector" %>
<script src='<% = ResolveUrl("~/Script/jquery-1.7.1.min.js") %>' type="text/javascript"></script>
<script src='<% = ResolveUrl("~/Script/textInputEvent.js") %>' type="text/javascript"></script>
<script type="text/javascript">
    var categoryChanged;
    var getHintInterval;

    $(document).ready(function ()
    {
        $("#categoryTextBox").bind("input", function ()
        {
            console.log("input");
            categoryChanged = true;
        });

        $("#categoryTextBox").focusin(function ()
        {
            categoryChanged = false;

            if ($("#categoryTextBox").val().length > 0)
                getHint();

            getHintInterval = setInterval(intervalTest, 2000);
        });

        $("#categoryTextBox").focusout(function ()
        {
            clearInterval(getHintInterval);
        });

        $("#listHolder").focusout(function ()
        {
            setTimeout(function ()
            {
                $("#listHolder>#categoryList").slideUp();
            }, 5000);
        });
    });

    function intervalTest()
    {
        console.log(categoryChanged);
        if (categoryChanged)
        {
            categoryChanged = false;
            getHint();
        }
    }

    function getHint()
    {
        var url = <%="\""+ ResolveUrl("~/showCategories.aspx?c=") +"\"" %> + $("#categoryTextBox").val() + " #categoryList";

        var $categoryTextBox = $("#categoryTextBox");
        var value = $categoryTextBox.val();
        var parents = value.substring(0, value.lastIndexOf("/") + 1);
        $("#listHolder").css("margin-left", parents.length + "em");

        $("#listHolder").load(url, function ()
        {
            //回调后注册事件
            $("#categoryList").change(function ()
            {
                console.log($(this).val() + $(this).text());
                //                
                //                var value = $categoryTextBox.val();
                //                var parents = value.substring(0, value.lastIndexOf("/") + 1);
                $("#categoryTextBox").val(parents + $(this).find("option:selected").text().trim());

                $("#listHolder").css("margin-left", parents.length + "em");
            });
        });


    }
        

</script>
<span class="categorySelector">
    <asp:TextBox ID="categoryTextBox" runat="server" ClientIDMode="Static"></asp:TextBox>
    <span id="listHolder"></span></span>